<template>
    <div>
        <ext-treetable v-loading="loading" ref="treeTable"
                       row-key="title"
                       border
                       :data="tableData"
                       size="mini" stripe style="margin-top: 5px;">
            <el-table-column label="编号" prop="id" align="center" width="60"/>
            <el-table-column label="资源名称" prop="title" align="center">
                <template slot-scope="scope">
                    <i :class="'fa fa-' + scope.row.icon"></i> {{scope.row.title}}
                </template>
            </el-table-column>
            <el-table-column label="权限编码" prop="permission" align="center"/>
            <el-table-column label="前端路径" prop="path" align="center"/>
            <el-table-column label="组件路径" prop="component" align="center"/>
            <el-table-column label="请求地址" prop="url" align="center"/>
            <el-table-column label="请求方式" prop="method" align="center"/>
            <el-table-column label="资源类型" prop="resource_type" align="center"
                             :filters="[{ text: '目录', value: 'DIR' },
                             { text: '模块', value: 'MODULE' },
                             { text: '按钮', value: 'BUTTON' },
                             { text: '接口', value: 'API' }]"
                             :filter-method="filterType">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type == 'DIR'" size="mini">目录</el-tag>
                    <el-tag v-if="scope.row.type == 'MODULE'" size="mini" type="success">模块</el-tag>
                    <el-tag v-if="scope.row.type == 'BUTTON'" size="mini" type="info">按钮</el-tag>
                    <el-tag v-if="scope.row.type == 'API'" size="mini" type="warning">接口</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="排序值" prop="sorted" width="120" align="center"/>

            <!--<el-table-column label="状态" prop="status" align="center" width="80">
                <template slot-scope="scope">
                    <boolean-control
                            :value="scope.row.status"
                            :id="scope.row.id"
                            @tableLoad="tableLoad"
                            @change="(val) => {scope.row.status = val}"
                    >
                        <d2-icon
                                name="check-circle"
                                style="font-size: 20px; line-height: 32px; color: #67C23A;"
                                slot="active"/>
                        <d2-icon
                                name="times-circle"
                                style="font-size: 20px; line-height: 32px; color: #F56C6C;"
                                slot="inactive"/>
                    </boolean-control>
                </template>

            </el-table-column>-->

            <el-table-column fixed="right" label="操作" align="center" width="130">
                <template slot-scope="scope">
                    <el-button type="primary" title="添加子级" size="mini" icon="el-icon-plus" circle
                               @click="handleForm({'status':'Y','ordinal':1, 'resource_type':'1','open_type':'0','parent_resource_id':scope.row.id,icon:'delicious'},'insert',scope.row)"></el-button>
                    <el-button type="primary" title="编辑" size="mini" icon="el-icon-edit" circle
                               @click="handleForm(scope.row,'update',scope.row)"></el-button>
                    <el-button type="danger" title="删除" :loading="scope.row.delLoading" size="mini"
                               icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
                </template>
            </el-table-column>

        </ext-treetable>

    </div>
</template>

<script>

  import { tree } from '@/api/upms/menu'

  export default {
    data () {
      return {
        loading: false,
        tableData: [
          {
            'resource_url': '/rbac',
            'open_type': '0',
            'create_time': '2018-11-07 17:16:19',
            'resource_code': 'system',
            'resource_type': '0',
            'icon': 'gear',
            'permission': null,
            'remark': null,
            'leaf': false,
            'update_time': '2018-11-08 11:45:07',
            'parent_resource_id': 'ROOT',
            'children': [
              {
                'resource_url': '/rbac/org',
                'open_type': '0',
                'create_time': '2018-11-07 17:19:45',
                'resource_code': 'org',
                'resource_type': '1',
                'icon': 'cubes',
                'permission': null,
                'remark': null,
                'update_time': '2018-11-08 18:08:15',
                'parent_resource_id': '266978270006743040',
                'id': '266979132951236608',
                'resource_name': '机构管理',
                'status': 'Y',
                'ordinal': 1
              },
              {
                'resource_url': '/rbac/user',
                'open_type': '0',
                'create_time': '2018-11-07 17:20:03',
                'resource_code': 'user',
                'resource_type': '1',
                'icon': 'user',
                'permission': null,
                'remark': null,
                'update_time': '2018-11-08 15:19:31',
                'parent_resource_id': '266978270006743040',
                'id': '266979208247382016',
                'resource_name': '用户管理',
                'status': 'Y',
                'ordinal': 2
              },
              {
                'resource_url': '/rbac/role',
                'open_type': '0',
                'create_time': '2018-11-07 17:50:07',
                'resource_code': 'role',
                'resource_type': '1',
                'icon': 'user-circle',
                'permission': null,
                'remark': null,
                'update_time': '2018-11-08 15:19:52',
                'parent_resource_id': '266978270006743040',
                'id': '266986776843784192',
                'resource_name': '角色管理',
                'status': 'Y',
                'ordinal': 4
              },
              {
                'resource_url': '/rbac/resource',
                'open_type': '0',
                'create_time': '2018-11-07 17:49:56',
                'resource_code': 'resource',
                'resource_type': '1',
                'icon': 'delicious',
                'permission': null,
                'remark': null,
                'update_time': '2018-11-07 17:50:16',
                'parent_resource_id': '266978270006743040',
                'id': '266986727237750784',
                'resource_name': '资源管理',
                'status': 'Y',
                'ordinal': 5
              }
            ],
            'id': '266978270006743040',
            'resource_name': '系统管理',
            'status': 'Y',
            'ordinal': 1
          }
        ]
      }
    },
    created () {
      this.getList()
    },
    methods: {
      getList () {
        this.loading = true
        tree().then(res => {
          this.tableData = res
          this.loading = false
        })
      }
    }
  }
</script>
